.site-tools {
    display: none;
}

@keyframes get-out-da-way {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(48px);
    }
}

@include md-up {
    .site-tools {
        position: fixed;
        display: block;
        z-index: $zindex-popover;
        right: $vertical-spacing;
        bottom: $vertical-spacing;
        border: none;
        &:has(.hide) {
            animation: get-out-da-way 0.3s forwards;
        }

        .hide-wrapper {
            display: flex;
            transition: all 0.3s;
            &.hide {
                transform: translateY(100%);
                opacity: 0;
            }

            > .active {
                z-index: $zindex-popover;
            }
        }

        .prompt {
            position: relative;
            margin-left: 0.75rem;
        }

        .overlay {
            @include overlay;
        }

        .box {
            position: absolute;
            bottom: 100%;
            margin-bottom: $vertical-spacing;
            right: 0;
            @include popover-box-styles;
        }
        button,
        a.prompt {
            @include popover-box-button;
        }

        a.prompt-donate {
            background-color: $vermillion;
            text-decoration: none;

            &:hover {
                background-color: $accent-vermillion;
            }
        }
    }
}
